<template>
  <div>
    <van-nav-bar
      class="w"
      title="分类商品"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="box">
      <div
        class="q1"
        v-for="item in lists"
        :key="item"
        @click="renxiang(item.id)"
      >
        <img class="img" :src="item.pic" />
        <p>{{ item.name }}</p>
        <p style="color: red">￥{{ item.minPrice }}</p>
      </div>
      <van-empty
        v-show="show"
        class="custom-image"
        image="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699005931,2648514072&fm=26&gp=0.jpg"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      lists: [],
      show: false,
    };
  },
  mounted() {
    var id = this.$route.query.id;
    this.$API.fenxiang(id).then((res) => {
      this.list = res.data.data;
      this.list.forEach((item) => {
        if (item.categoryId == id) {
          this.lists.push(item);
        }
      });
      //    如果有商品就让空状态隐藏如果没有商品就让它显示空状态
      if (this.lists.length == 0) {
        this.show = true;
      } else {
        this.show = false;
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    renxiang(id) {
      this.$router.push({ path: "/renxiang", query: { id: id } });
    },
  },
};
</script>
<style  scoped>
.w {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.q1 {
  width: 48%;
  height: 220px;
  margin-top: 40px;
}
.img {
  width: 100%;
  height: 160px;
}
p {
  margin-top: -3px;
}
.custom-image {
  margin: 0 auto;
  margin-top: 100px;
}
</style>